<template>
  <div id = "app">
  <el-row>
    <el-col :span="8">
      <div style="margin-left: 0px; margin-top:10px;">
        <Container behaviour="copy" group-name="1" :get-child-payload="getChildPayload1">
          <Draggable v-for="item in items1" :key="item.id">
            <div class="draggable-item" v-if="item.id==0">
              <el-button plain>{{item.data}}</el-button>
            </div>
            <div class="draggable-item" style="margin-top:10px" v-else-if="item.id==1">
              <el-button type="primary" plain>{{item.data}}</el-button>
            </div>
            <div class="draggable-item" style="margin-top:10px" v-else-if="item.id==2">
              <el-button type="success" plain>{{item.data}}</el-button>
            </div>
            <div class="draggable-item" v-else>
              {{item.id}}
            </div>
          </Draggable>
        </Container>
      </div>
    </el-col>
    <el-col :span="2">
    </el-col>
    <el-col :span="6">

      <div style="margin-left: 0px; flex: 1" class="layout-content-wrap">
        <div style="position: relative; height: 40px; background: rgb(61, 148, 255);">
          <div class="page-name" style="color: rgb(255, 255, 255);"></div>
        </div>
        <Container group-name="1" :get-child-payload="getChildPayload2" @drop="onDrop('items2', $event)">
          <Draggable v-for="item in items2" :key="item.id">
            <div class="draggable-item" v-if="item.id==0">
            <!--  <div class="border-select el-row" style=""></div> -->
              <div class="richtext el-row" style="padding: 5px 0px;">我是富文本</div>
            </div>
            <div class="draggable-item" v-else-if="item.id==1">
              <div class="el-row"><div style="background-color: rgb(230, 242, 255); text-align: center; height: 200px; line-height: 200px;"><i class="iconfont" style="color: rgb(255, 255, 255); font-size: 68px;"></i></div></div>
            </div>
            <div class="draggable-item" v-else-if="item.id==2">
              <div class="zan-btn el-row" style="color: rgb(34, 34, 34); background: rgb(255, 255, 255);">按钮</div>
            </div>
            <div class="draggable-item" v-else>
              {{item.data}}
            </div>
          </Draggable>
        </Container>
      </div>
    </el-col>
    <el-col :span="8">
      <div style="margin-left: 50px; flex: 1">
        <Container group-name="1" :get-child-payload="getChildPayload3" @drop="onDrop('items3', $event)">
          <Draggable v-for="item in items3" :key="item.id">
            <div class="draggable-item">
              {{item.data}}
            </div>
          </Draggable>
        </Container>
      </div>
    </el-col>
  </el-row>
  </div>
</template>
<style>
.layout-content-wrap {
    width: 375px;
    height: 650px;
    box-sizing: border-box;
    background: #fff;
    position: relative;
    margin: 0 auto;
}
.border-select {
    width: 100%;
    height: 100%;
    border: 2px dashed #08b8fd;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.zan-btn {
    position: relative;
    color: #333;
    background-color: #fff;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 2px;
    border: 1px solid #eee;
    font-size: 16px;
    line-height: 45px;
    height: 45px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    overflow: visible;
}
</style>
<script>
  import {
    Container,
    Draggable
  } from 'vue-smooth-dnd'
  import {
    applyDrag,
    generateItems
  } from './utils/helpers'

  export default {
    name: 'Copy',

    components: {
      Container,
      Draggable
    },

    data() {
      return {
        items1: generateItems(3, i => {
          var d;
          if (i == 0) {
            d = "文本";
          } else if (i == 1) {
            d = "图片";
          } else if (i == 2) {
            d = "按钮";
          }
          return {
            id: i,
            data: d
          }
        }),
        items2: generateItems(1, i => ({
          id: '2' + i,
          data: `拖到这里哦`
        })),
        items3: generateItems(1, i => ({
          id: '3' + i,
          data: `垃圾桶`
        }))
      }
    },

    methods: {
      onDrop(collection, dropResult) {
        this[collection] = applyDrag(this[collection], dropResult)
        console.log(dropResult)
      },

      getChildPayload1(index) {
        return this.items1[index]
      },

      getChildPayload2(index) {
        return this.items2[index]
      },

      getChildPayload3(index) {
        return this.items3[index]
      }
    }
  }
</script>
